docs(ai-transport): add token streaming example, reframe append example#3448
Open
rainbowFi wants to merge 5 commits into
Open
docs(ai-transport): add token streaming example, reframe append example#3448rainbowFi wants to merge 5 commits into
rainbowFi wants to merge 5 commits into
Conversation
|
Important Review skippedAuto reviews are disabled on this repository. Please check the settings in the CodeRabbit UI or the ⚙️ Run configurationConfiguration used: Repository UI Review profile: CHILL Plan: Pro Run ID: You can disable this status message by setting the Use the checkbox below for a quick retry:
✨ Finishing Touches🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
fd3ecc2 to
00cbf76
Compare
00cbf76 to
d2f09c4
Compare
d2f09c4 to
f27495c
Compare
f4de9f1 to
f078c15
Compare
f078c15 to
ba5edcf
Compare
ba5edcf to
13ebbad
Compare
13ebbad to
d3e619b
Compare
Example product keys (ai_transport, liveobjects) do not match @ably/ui's ProductTile keys (aiTransport, liveObjects), so gallery cards for those products rendered without a product badge. Map the keys in ExamplesGrid.
Example gallery pages are generated from src/data/examples at /examples/<id>, and redirects were previously only sourced from MDX redirect_from frontmatter, so renaming or removing an example left its old URL as a 404. Add an optional redirectFrom field to Example and write nginx and client-side redirects for it, mirroring the MDX flow.
…e-append The example always used raw Pub/Sub appendMessage and rewind rather than the AI Transport SDK, so present it as a Pub/Sub message append example. The READMEs, UI text, and gallery entry now describe Pub/Sub append, and point to AI Transport as the recommended approach for streaming AI responses. The old example URL redirects to the new one. Rework the code to model a generic text stream rather than an LLM response: MockLLM becomes MockTextStream, Agent becomes Publisher, and prompt-and-response naming becomes stream naming throughout. The channel stays in the ai namespace, which has mutable messages enabled, as appendMessage() requires; a comment now records that constraint. Also fix issues found in review: link appendMessage() to /docs/messages#append (the previous API reference anchor targets an H4, which gets no anchor generated), remove dead prompt-display and cursor spans from the JavaScript variant, and align its fallback API key placeholder with the other examples.
…port SDK
Add a runnable token streaming example (React and JavaScript) on
@ably/ai-transport 0.4, mirroring the Core SDK getting started guide:
the agent flow (createAgentSession, createRun, start, drain run.view,
pipe, end) and the client hooks (ClientSessionProvider, useView,
useClientSession).
The model is mocked so the example runs without an API key, but the
fake LLM emits the exact UIMessageChunk stream that
streamText(...).toUIMessageStream() produces, so the agent code matches
a production integration. The two necessary deviations (agent runs
in-browser, token source mocked) are commented in the code.
Both variants re-render on run lifecycle events (session.tree.on('run'))
and gate streaming on status === 'active', because useView alone only
re-renders on visible message-content changes and would leave the UI
stuck in the streaming state when a run reaches a terminal status
(related SDK gap: AIT-1128). A Refresh button demonstrates recovery:
the full response is served from channel history on rejoin.
Wire up the gallery entry, Sandpack dependencies, and docs cross-links,
and reuse the message-per-response gallery image for the new example.
Superseded by the ai-transport-token-streaming example, which shows the same token-by-token streaming through the AI Transport SDK rather than raw Pub/Sub. Remove the example, its gallery entry, its workspace entries, and its gallery image, and redirect its URL to the new example.
d3e619b to
ce029a2
Compare
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Refreshes the out-of-date AI Transport streaming examples (AIT-1030): adds a runnable token streaming example built on the AI Transport SDK, reframes the old append example under Pub/Sub, and fixes two example-gallery gaps found along the way.
How to review
The branch is five single-purpose commits, best read in order:
fix(examples): product badge fix. Example product keys (ai_transport,liveobjects) did not match@ably/ui's ProductTile keys, so those gallery cards rendered without a badge.ExamplesGridnow maps them.feat(examples): redirects for renamed example pages. Gallery pages are generated at/examples/<id>fromsrc/data/examples, and redirects were previously only sourced from MDX frontmatter, so renaming an example left a 404. Adds an optionalredirectFromfield toExample, mirroring the MDX flow.docs(pub-sub): reframeai-transport-message-per-responseaspub-sub-message-append. The example always used raw Pub/SubappendMessage+rewindrather than the SDK, so the READMEs, UI copy, and gallery entry now describe it accurately and point to AI Transport as the recommended approach for AI streaming. The code now models a generic text stream rather than an LLM response:MockLLMbecomesMockTextStream,AgentbecomesPublisher, and prompt-and-response naming becomes stream naming throughout. The channel stays in theai:namespace because that namespace has mutable messages enabled, whichappendMessage()requires; a code comment records that constraint. Also includes review fixes: a workingappendMessage()doc link (/docs/messages#append; the API-reference anchor targets an H4 that gets no anchor generated), dead markup removed, API key placeholder aligned. The old URL redirects to the new one.docs(ai-transport): the token streaming example (React + JavaScript), on@ably/ai-transport0.4. Mirrors the Core SDK getting started: the agent flow (createAgentSession→createRun→start→ drainrun.view→pipe→end) and the client hooks (ClientSessionProvider,useView,useClientSession). The model is mocked so it runs without an API key, but the fake LLM emits the exactUIMessageChunkstream thatstreamText(...).toUIMessageStream()produces, so the agent code matches a production integration; the two necessary deviations (agent runs in-browser, token source mocked) are commented in the code. Both variants re-render on run lifecycle events (session.tree.on('run')) and gate streaming onstatus === 'active', becauseuseViewalone would leave the UI stuck in the streaming state when a run reaches a terminal status (related SDK gap: AIT-1128). A Refresh button demonstrates recovery from channel history. Includes Sandpack deps, the root workspace dependency (@ably/ai-transport ~0.4.0,ai ^6,ably ~2.23.0) with the regeneratedyarn.lock, gallery entry and image, and docs cross-links.docs(ai-transport): removeai-transport-message-per-token, superseded by the token streaming example. Pure deletion plus a redirect for its URL.Verification
@ably/ai-transport0.4 call and every mockedUIMessageChunkshape was checked against the package's type definitions; both variants mirror the Core SDK getting started guide.yarn installleaves the committedyarn.lockunchanged.Known simplifications (intentional)
useView({ limit: 30 })page while the JavaScript variant drains history viahasOlder()/loadOlder(); the JavaScript variant deliberately demonstrates the paging API.